<template>
    <div>
        <el-descriptions class="margin-top" title="个人中心" :column="3"  border>
            <template slot="extra">
            <el-button type="primary" size="small" @click="dialog_visiable = true">修改个人信息</el-button>
            <el-dialog title="修改个人信息" :visible.sync="dialog_visiable">
                <el-form :model="form" status-icon  :rules="rules" ref="form">
                    <el-form-item label="用户昵称" prop="form_petName">
                        <el-input v-model="form.form_petName" placeholder="输入新昵称" ></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="form_pwd">
                        <el-input type="password" v-model="form.form_pwd" placeholder="输入您的新密码" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="再次输入密码" prop="form_repeat_pwd">
                        <el-input type="password" v-model="form.form_repeat_pwd" placeholder="再次输入密码" auto-complete="off"></el-input>
                    </el-form-item>  
                    <el-form-item >
                        <el-button type="primary" @click.native="updateUser('form')">保存</el-button>
                        <el-button @click="restForm('form')">取消</el-button>
                    </el-form-item>                
                </el-form>
                

                               
            </el-dialog>
            </template>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    用户id
                </template>
                {{getUserId}}            
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-user-solid"></i>
                姓名
            </template>
                {{getUserName}}
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-location-outline"></i>
                学院
            </template>
                {{getUserCollege}}
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-tickets"></i>
                昵称
            </template>
                {{getUserPetName}}
            </el-descriptions-item>
        </el-descriptions>        
    </div>
</template>
<script>
import userCenter from '@/api/userCenter'
export default{
    name:'userCenter',
    data() {
        var validatePetName = (rule,value,callback) =>{
            if(!value){
                return callback(new Error('昵称不能为空！'));
            } else return callback();
        }
        var validatePass = (rule,value,callback) => {
            if (value === '') {
                callback (new Error('请输入新密码'));
            } else {
                if (this.form.form_repeat_pwd !== ''){
                    this.$refs.form.validateField('repeat_pwd');
                }
                callback();
            }
        };
        var validatePass2 = (rule,value,callback) => {
            if (value === ''){
                 callback (new Error('请再次输入密码'));
            } else if (value !== this.form.form_pwd) {
               callback (new Error('两次输入密码不一致！！'));
            } else {
                callback();
            }
        }
        return {
            user_name:'未知',
            user_pwd:'',
            name:'',
            college:'',
            petName:'',
            dialog_visiable:false,
            form: {
                form_petName:'',
                form_pwd:'',
                form_repeat_pwd:''
            },
            rules: {
                form_petName:[{validator: validatePetName,trigger:'blur'}],
                form_pwd:[
                    {validator: validatePass,trigger: 'blur'}
                ],
                form_repeat_pwd:[
                    {validator: validatePass2,trigger:'blur'}
                ]
            }
        }
    },
    created() {
        // this.getUserInfoById()
    },
    computed:{
        getUserId(){
            let username = localStorage.getItem('ms_userId')
            return username ? username:this.user_name;
        },
        getUserName(){
            let username = localStorage.getItem('ms_username')
            return username ? username:this.name;
        },
        getUserCollege(){
            let username = localStorage.getItem('ms_userCollege')
            return username ? username:this.college; 
        },
        getUserPetName(){
            let username = localStorage.getItem('ms_userpetName')
            return username ? username:this.petName;            
        }
    },
    methods:{
        updateUser() {
 
                    const data = {
                        id:localStorage.getItem('ms_userId'),
                        petName:this.form.form_petName,
                        pwd:this.form.form_pwd
                    }
                    userCenter.updateUser(data.id,data.petName,data.pwd)
                    .then(response =>{
                        var msg = response.status;
                        if (msg === 200){
                            this.$notify({
                                title: '成功',
                                message: '更新成功,重新登陆',
                                position: 'top-left',
                                duration: 1500,
                                type: 'success'
                            });
                            this.$router.push('/loginUser');
                        } else {
                            this.$notify.error({
                                title: '失败',
                                position: 'top-left',
                                duration: 1500,
                                message: '失败了'
                            });
                        }
                        this.form.form_petName='';
                        this.form.form_pwd='';
                        this.form.form_repeat_pwd='';
                    })
                    this.dialog_visiable = false;

            }

        },
        restForm(form){
            this.$refs[form].resetFields();
            this.dialog_visiable = false;
        }
    }

</script>
<style scoped>
.inputHide>>>.input{
 border: 0;
}
</style>